{% extends "base.html" %}
{% block stylesheets %}
{% endblock %}
{% block content %}
<div class="uk-section uk-section-muted uk-section-large">
    <div class="uk-container uk-container-medium uk-text-center">
        <h1 class='uk-heading-primary'>Register</h1>
    </div>
</div>
{% if errors %}
<div class="uk-section-primary uk-preserve-color">
    <div class="uk-container uk-container-medium uk-text-center">
        <div id='errors' class='uk-margin-top'>
            {% for error in errors %}
            <div class="uk-alert-danger" uk-alert>
                <a class="uk-alert-close" uk-close></a>
                <h3 class="uk-text-center">{{ error }}</h3>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
<div class="uk-section uk-section-secondary">
	<!-- Hiding MLC Login. Not Supported. -->
    <!-- <div class="uk-container uk-container-small uk-margin">
        <div class="uk-flex uk-flex-center">
            <div>
                <a class="uk-button uk-button-large uk-button-default" href="{{ url_for('auth.oauth_login') }}">Login with Major League Cyber</a>
            </div>
        </div>
    </div> -->
    <div class="uk-container uk-container-small">
        <div class="uk-flex uk-flex-center">
            <form onsubmit="disable(submit)" method="POST" accept-charset="utf-8" autocomplete="off" role="form">
                <fieldset class="uk-fieldset">
                    <div class="uk-margin">
                        <div class="uk-inline uk-width-large@s">
                            <span class="uk-form-icon" uk-icon="icon: user"></span>
                            <input autofocus="true" class="uk-input uk-form-large " id="name-input" name="name" placeholder="User Name" required type="text" {% if name %}value="{{ name }}" {% endif %} />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <div class="uk-inline uk-width-large@s">
                            <span class="uk-form-icon" uk-icon="icon: mail"></span>
                            <input class="uk-input uk-form-large uk-width-large@s" id="email-input" name="email" placeholder="Email" required type="text" {% if email %}value="{{ email }}" {% endif %} />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <div class="uk-inline uk-width-large@s">
                            <span class="uk-form-icon" uk-icon="icon: lock"></span>
                            <input class="uk-input uk-form-large uk-width-large@s" id="password-input" name="password" placeholder="Password" required type="password" {% if password %}value="{{ password }}" {% endif %} />
                        </div>
                    </div>
                    <div class="uk-margin uk-text-center">
                        <input class="uk-button uk-button-large uk-button-primary uk-width-medium uk-margin-small-bottom" id="submit" name="submit" type="submit" value="Register">
                    </div>
                    <input type="hidden" name="nonce" value="{{ nonce }}">
                </fieldset>
            </form>
        </div>
        <div class="uk-margin uk-text-center">
            <a class="uk-link" href="{{ url_for('auth.login') }}">Already Registered?</a>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
function disable(el) {
    var oldLabel = el.value;
    el.value = "Please Wait...";
    el.disabled = true;
}
</script>
{% endblock %}